<!--
 * @Author: panda
 * @Date: 2022-05-18 09:53
 * @Description: 登陆注册弹窗
-->
<template>
  <el-dialog v-model="isShow" center="center" width="24%">
    <!--有bug-->
    <div style="display: flex; justify-content: center; padding-bottom: 20px">
      <el-button
        type="text"
        style="font-size: 18px" size="large"
        @click="showLogin">
        密码登陆
      </el-button>
      <el-button type="text" style="font-size: 18px" size="large" @click="showRegister"
      >用户注册
      </el-button
      >
    </div>
    <div v-if="showLeft">
      <LoginCom
        @is-login="isLogin"
        @is-click="showRegister" />
    </div>

    <div v-else-if="showRight">
      <RegisterCom @to-login="showLogin" />
    </div>
    <div style="display: flex; justify-content: center; margin:20px 20px">
      登录或完成注册即代表你同意
      <a href="" style="color: #287bde">&nbsp;用户协议&nbsp;</a> 和
      <a href="" style="color: #287bde">&nbsp;隐私政策&nbsp;</a>
    </div>
  </el-dialog>

</template>

<script lang="ts" setup>
import LoginCom from '@/components/loginRegister/LoginCom.vue'
import RegisterCom from '@/components/loginRegister/RegisterCom.vue'
import {ref} from "vue";
import {useRoute} from "vue-router";
import {router} from "@/router";

const route = useRoute()
// 显示登陆
const showLeft = ref(true)
// 显示注册
const showRight = ref(false)
//是否显示弹窗
const isShow = ref(route.meta.dialogVisible)
// 子组件emit方法，显示登陆
const showLogin = () => {
  showLeft.value = true
  showRight.value = false
}
//显示注册
const showRegister = () => {
  showLeft.value = false
  showRight.value = true
}

// isShow.value=computed(()=>{
//   return route.meta.dialogVisible
// })

// 子组件emit方法，判断是否登陆成功
const isLogin = (val: boolean) => {
  isShow.value = val
  router.back()

}

// const closeDialog = () => {
//   dialogVisible.value = false
// }
</script>

<style scoped>

</style>
